<template>
    <div class="logincom">
        <div class="kuang">
            <!-- submit.prevent:阻止提交事件的刷新页面 -->
            <form v-on:submit.prevent="login()">
         <h4>登陆界面</h4>
        <p>
            <i class="iconfont icon-ren2"></i>
            账号
             <input type="text" placeholder="邮箱或手机号登陆" required  v-model.lazy.trim="username">
        </p>
       <p>
        <i class="iconfont icon-icon_list_unlocked_default"></i>
        密码
        <input type="password" placeholder="登录密码" required v-model.lazy.trim="pwd">
       </p>
       <p>
        <!-- 可选功能：如果勾选，在浏览器内保存上一次的登陆账号和登录密码；如果没有勾选，不保存登录信息的同时还需要清除上一次记录的数据 -->
        <input type="checkbox" v-model="isRem" style="width:20px;height:15px">
        <span>记住密码</span>
       </p>
       <p>
        <!-- 这两个按钮在form标签内的时候都只执行提交submit事件 -->
       <input type="submit" value="登录">
       <!-- <button>在form标签内的时候</button> -->
        </p>              
            </form>
            <button @click="zc()">注册</button>
 </div>
        </div>

</template>

<script>
import font from "../assets/font/iconfont.css";
export default {
    
    //data函数：存储组件的数据
    data(){
        return{
            font,
            username: '',//用v-model将输入框的value值直接赋值给username变量
            pwd:'',
            isRem:false,//false:默认不勾选
        }
    },
    //加载完成之后
    mounted(){
        //上一次登录时记住密码的状态
        let isremmeber = localStorage.getItem('loginRem');
        console.log(isremmeber);//字符串数据/null
        
        // //判断上一次是否记住密码
        // if(isremmeber == 'true'){
        //     //上一次记住密码，从存储内提取上一次的数据
        //     this.username = localStorage.getItem('loginuser');
        //     this.pwd = localStorage.getItem('loginpwd');
        //     this.isRem = true;
        // }else{
        //     //上一次没有记住密码，不显示数据
        //     this.username='';
        //     this.pwd='';
        //     this.isRem=false;
        // }
        this.username=isremmeber=='true'?localStorage.getItem('loginuser'):'';
        this.pwd=isremmeber=='true'?localStorage.getItem('loginpwd'):'';
        this.isRem=isremmeber=='true'?true:false;

    },
    //methods对象：存储事件函数
    methods:{
        //登录函数:从vuex里面获取注册的数据；根据手机号码/邮箱和密码查找对应的用户，完成登录并存储信息
        login(){
            const user=[
                {username : 'admin1' , pwd : 123456},
                {username : 'admin2' , pwd : 987654},
                {username : 'admin3' , pwd : 123789},
                {username : 'admin4' , pwd : 987321},
                {username : 'admin5' , pwd : 654321},
            ];
            //根据输入框输入的账号和密码，如果输入的数据跟上面数组中的任意一组数据匹配，我们认为登录成功：
            //1.记录登录状态到会话存储localStorage
            //2.跳转到首页
            //循环遍历
            // user.forEach(item=>{
            //     if(item.username == this.username && item.pwd == this.pwd){
            //         sessionStorage.setItem('islogin' , 'true');
            //         //编程式导航
            //         this.$router.push('/home');
            //         //终止循环
            //         return;
            //     }
            // })

            //过滤函数filter：设置一个过滤条件，如果有符合的数据存储到新数组内
            let result=user.filter(item => {
                //return出过滤的条件（判断条件）
                return item.username==this.username&&item.pwd==this.pwd
            });
            //判断是否登录成功
            if(result.length >0){
                //在登陆成功的前提下，判断是否需要记住密码
                if(this.isRem){
                    //本地存储记录本次登录成功的账号和密码、本次记录密码的状态
                    localStorage.setItem('loginuser',this.username);
                    localStorage.setItem('loginpwd',this.pwd);
                    localStorage.setItem('loginRem',this.isRem);
                }else{
                    //将上一次存储到本地存储的登录账号和密码进行清除、上一次记录密码的状态进行清除
                    localStorage.clear();
                }
                sessionStorage.setItem('islogin', this.username);
                //编程式导航
                this.$router.push('/home');
            }else{
                alert('登录失败')
            }
        },
        zc(){
            this.$router.push('/zhuce')
        }
    }
}
</script>

<style scoped>
h4{
    text-align: center;
}
.logincom{
    width: 60%;
    height: 40%;
    color: red;
    font-weight: 600;
}
.kuang{
    width: 600px;
    position:absolute;
    left: 30%;
    top: 40%;
    border: red 10px solid;
    border-radius: 5px;
}
input{
    border: none;
    width: 88%;
    height: 20px;
    margin-top: 15px;
}
i{
    font-size: 20px;
    margin-right: 5px;
}
</style>